<template>
	<view class="page prize">
		<view class="container">
			<bargain-details :info="bargainInfo" @videoBargain="getDetails" v-if="bargainInfo"></bargain-details>
			<bargain-record ref="record"></bargain-record>
			<bargain-more></bargain-more>
			<view class="margin-bottom36"><banner-ad></banner-ad></view>
			<form @submit="setFormId" report-submit="true">
				<button
					v-if="!isMe"
					form-type="submit"
					open-type="share"
					id="friendShare"
					class="formId-btn"
					style="width: 150rpx;position: fixed;right: 0;bottom: 180rpx;z-index: 1000;"
				>
					<image src="../../../static/images/ui_kj_share.png" mode="widthFix" class="mc-db pct100"></image>
				</button>
				<button
					v-if="showHome"
					type="primary"
					form-type="submit"
					@tap="toHome"
					class="border-radius more-game-btn"
					style="width: 690rpx;position: fixed;left: 30rpx;bottom: 20rpx;z-index: 1000;background-color: #ff5757;"
				>
					试试更多玩法，免费拿大奖
				</button>
			</form>
		</view>
		<c-pop></c-pop>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import bargainDetails from '@/components/home/bargain-details/index.vue';
import bargainRecord from '@/components/home/bargain-record/index.vue';
import bargainMore from '@/components/home/bargain-more/index.vue';
let _self;
export default {
	components: {
		bargainDetails,
		bargainRecord,
		bargainMore
	},
	data() {
		return {
			bargainId: null,
			bargainPartakeId: null,
			shareUserId: null,
			bargainInfo: null,

			showHome: false,
			receiveTimers: null,
			InterstitialAd: null
		};
	},
	computed: {
		...mapGetters('user', ['_isLogin', '_gameInfo']),
		...mapGetters('draw', ['_drawList']),
		...mapGetters('pop', ['_popKey']),
		isMe: function() {
			return this.bargainInfo && this._gameInfo && this._gameInfo.userId === this.bargainInfo.userId;
		}
	},
	methods: {
		...mapActions('user', ['gameInfoUp']),
		...mapActions('pop', ['popShow']),
		...mapActions('draw', ['drawListLoad']),
		refresh() {
			this.getDetails();
			const pages = getCurrentPages();
			if (pages.length > 1 && pages[pages.length - 2] && pages[pages.length - 2].route.indexOf('pages/tabBar/draw/index') >= 0) {
				pages[pages.length - 2].$vm.loadList();
			}
		},
		// 抽奖详情
		async getDetails() {
			this.bargainInfo =
				(await this.$api.bargain.getBargainDetail({
					bargainId: this.bargainId,
					id: this.bargainPartakeId
				})) || {};

			this.bargainPartakeId = this.bargainInfo.id;
			this.bargainId = null;

			if (this.bargainInfo.status == 3 && this.bargainInfo.userId === this._gameInfo.userId) {
				//已失效
				this.popShow({
					key: 'cBargainFail',
					value: {
						avatar: this.bargainInfo.photo
					}
				});
			} else if (this.bargainInfo.status == 2 && this.bargainInfo.userId === this._gameInfo.userId) {
				//砍价成功
				this.popShow({
					key: 'cBargainSuccess',
					value: {
						name: this.bargainInfo.price + (this.bargainInfo.unit || '点券') + '皮肤',
						id: this.bargainInfo.id
					}
				});
			} else {
				this.showBargainReceive();
			}

			this.$refs.record.getBargainRecordList(this.bargainPartakeId, this.bargainInfo);
		},
		islogin() {
			if (!this._isLogin) {
				uni.reLaunch({
					url: '/pages/authorize/index'
				});
			} else if (!this._gameInfo) {
				this.gameInfoUp();
			}
		},
		moreDraw() {
			uni.switchTab({
				url: '/pages/tabBar/draw/index'
			});
		},
		isShowHomeBtn() {
			this.showHome = getCurrentPages().length == 1;
		},
		toHome() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			});
		},
		async showBargainReceive() {
			let item = null;
			if (!this._drawList) {
				await this.drawListLoad();
				this.showBargainReceive();
				return;
			} else {
				if (this._drawList && this._drawList.length > 0) {
					for (let i in this._drawList) {
						if (this._drawList[i].isPartake === 0) {
							item = this._drawList[i];
							break;
						}
					}
				}
			}
			if (item) {
				this.receiveTimers = setTimeout(() => {
					if (!this._popKey && this.bargainInfo.isBargain === 1)
						this.popShow({
							key: 'cBargainReceive',
							value: {
								image: item.shareImgUrl,
								prizeId: item.prizeId
							}
						});
					clearTimeout(this.receiveTimers);
					this.receiveTimers = null;
				}, 8000);
			}
		},
		//创建插屏广告
		async createInterstitialAd() {
			const pageName = 'bargainDetails';
			if (!this.InterstitialAd || this._pageName != pageName) {
				await this.$store.dispatch('InterstitialAd/destroy');
				this.InterstitialAd = qq.createInterstitialAd({
					adUnitId: '1e9e1454c766205f778256de22e4bebf'
				});
				this.$store.dispatch('InterstitialAd/init', {
					InterstitialAd: this.InterstitialAd,
					pageName
				});
			}
		},
		// ---------------------------------------
		// 保存二维码
		setFormId(e) {
			this.$store.dispatch('common/formIdListUp', {
				e: e,
				isSave: true
			});
		}
	},
	onLoad(options) {
		console.error('onLoad options:' + JSON.stringify(options));
		this.$store.dispatch('common/enterUrlUp', {
			query: options,
			path: 'pages/bargain/details/details'
		});

		_self = this;
		this.bargainId = options.bargainId || null;
		this.bargainPartakeId = options.bargainPartakeId || null;
		this.shareUserId = options.shareUserId || null; // '164772879681536';
		this.isShowHomeBtn();
		this.islogin();
		this.getDetails();
	},
	onShow() {
		this.createInterstitialAd();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getDetails();
		uni.stopPullDownRefresh();
	},
	onUnload() {
		if (this.receiveTimers) {
			clearTimeout(this.receiveTimers);
			this.receiveTimers = null;
		}
		this.popShow();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log('onShareAppMessage', res);
			const data = res.target.dataset;
			if (data.id === 'friendShare') {
			}
		}
		return {
			title: '好友邀请你砍一刀，免费获取' + this.bargainInfo.activityName + '皮肤一套',
			path: '/pages/bargain/details/details?shareUserId=' + this._gameInfo.userId + '&bargainPartakeId=' + this.bargainPartakeId,
			imageUrl: this.bargainInfo.shareImgUrl
		};
	}
};
</script>

<style lang="scss" scoped>
.prize {
	background-color: #581ae1;
	color: #555555;
	font-size: 32rpx;

	.container {
	}

	.more-game-btn {
		animation: animation 1s infinite;
	}

	@keyframes animation {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(1);
		}
	}
}
</style>
